<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/details.css" />
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/details.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".header-all").load("header.html");
				$(".footer-all").load("footer.html");
			})
		</script>
	</head>
	<body>
		<div class="header-all"></div>
		
		<div class="commodity-detail">
			<div class="container">
				<!-- 图片 -->
				<div class="commodity-pic">
					<div class="pic-max white">
						<a href="javascript:void(0)" class="max01"><img src="img/details/commodity-max01.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max02"><img src="img/details/commodity-max02.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max03"><img src="img/details/commodity-max03.jpg" width="560px"></a>
					</div>
					
					<div class="pic-max blue">
						<a href="javascript:void(0)" class="max01"><img src="img/details/commodity-max-blue01.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max02"><img src="img/details/commodity-max-blue02.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max03"><img src="img/details/commodity-max-blue03.jpg" width="560px"></a>
					</div>
					
					<div class="pic-max gray">
						<a href="javascript:void(0)" class="max01"><img src="img/details/commodity-max-gray01.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max02"><img src="img/details/commodity-max-gray02.jpg" width="560px"></a>
						<a href="javascript:void(0)" class="max03"><img src="img/details/commodity-max-gray03.jpg" width="560px"></a>
					</div>
					
					<div class="pic-min white">
						<ul>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min01.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min02.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min03.jpg" width="80px"></a></li>
						</ul>
					</div>
					
					<div class="pic-min blue">
						<ul>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-blue01.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-blue02.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-blue03.jpg" width="80px"></a></li>
						</ul>
					</div>
					
					<div class="pic-min gray">
						<ul>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-gary01.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-gary02.jpg" width="80px"></a></li>
							<li><a href="javascript:void(0)"><img src="img/details/commodity-min-gary03.jpg" width="80px"></a></li>
						</ul>
					</div>

					<div class="pic-collect">
						<a href="javascript:void(0)">
							<img src="img/details/collect_03.jpg" width="20px">
							<span>收藏</span>
						</a>
					</div>
				</div>
				<!-- 信息 -->
				<div class="commodity-message">
					<div class="commodity-head">
						<span>魅族 EP52 Lite 蓝牙耳机</span>
						<span>轻巧亲肤 | 生物纤维振膜 | 8小时续航 | IPX5级防水</span>
					</div>
					<div class="commodity-price">
						<span>¥</span>
						<span>129.00</span>
					</div>
					<div class="commodity-service">
						<div class="service-zhichi">
							<span class="text-hd">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
							<span class="text-img"><img src="img/details/support_03.jpg" width="20px"></span>
							<span>顺丰发货</span>
							<span class="text-img"><img src="img/details/support_03.jpg" width="20px"></span>
							<span>7天无理由退货</span>
						</div>
						<div class="service-peisong">
							<div class="peisong-address">
								<span class="text-hd">配送服务</span>
								<span>山东省 青岛市 ▾</span><br>
							</div>
							
							<div class="peisong-kefu">
								<span class="text-hd"> </span>
								<span>本商品由 魅族 负责发货并提供售后服务</span>
								<a href="javascript:void(0)">
									<span class="kefu-img"><img src="img/details/kefu_03.jpg" ></span>
									<span>商城客服</span>
								</a>
							</div>
							
						</div>
					</div>
					<div class="commodity-type">
						<span class="text-hd">型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>
						<div class="type-select">
							<a href="javascript:void(0)">EP52 Lite</a>
							<a href="javascript:void(0)">EP63NC</a>
							<a href="javascript:void(0)">POP2</a>
							<a href="javascript:void(0)">HD60</a>
							<a href="javascript:void(0)">EP52 Lite</a>
						</div>
					</div>
					
					<div class="commodity-color">
						<span class="text-hd">颜色分类</span>
						<div class="color-select">
							<a href="javascript:void(0)"><img src="img/details/color-select01.png" width="32px">深蓝</a>
							<a href="javascript:void(0)" class="selected"><img src="img/details/color-select02.png" width="32px">月白</a>
							<a href="javascript:void(0)"><img src="img/details/color-select03.png" width="32px">云灰</a>
						</div>
					</div>
					
					<div class="commodity-number">
						<span class="text-hd">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</span>
						<div class="number-select">
							<a title="减少" href="javascript:void(0)" class="num-minus disabled">-</a>
							<!-- 将输入值为非数字的字符替换为空； -->
							<input id="shuliang" type="text" value="1" readonly ="readonly" onkeyup="this.value=this.value.replace(/\D/g,'')">
							<a title="增加" href="javascript:void(0)" class="num-plus">+</a>
						</div>
					</div>
					
					<div class="commodity-buy">
						<button type="button"><a href="ShoppingCart.html">立即购买</a></button>
						<button type="button">加入购物车</button>
					</div>
				</div>
			</div>

		</div>
		
		<div class="details-hd">
			<div class="container">
				<ul>
					<li>商品详情</li>
					<li>规格参数</li>
				</ul>
			</div>
		</div>
		<div class="details-more">
			<div class="container">
				
				<div class="more-img">
					<img src="img/details/details-more01.jpg" width="1240px">
					<img src="img/details/details-more02.jpg" width="1240px">
					<img src="img/details/details-more03.jpg" width="1240px">
					<img src="img/details/details-more04.jpg" width="1240px">
					<img src="img/details/details-more05.jpg" width="1240px">
					<img src="img/details/details-more06.jpg" width="1240px">
					<img src="img/details/details-more07.jpg" width="1240px">
					<img src="img/details/details-more08.jpg" width="1240px">
					<img src="img/details/details-more09.jpg" width="1240px">
					<img src="img/details/details-more10.jpg" width="1240px">
				</div>
				
				<div class="more-tbl">
					<table cellspacing="0" cellpadding="0" class="tbl">
						<tr class="tbl-hd">
							<th colspan="2">基础信息</th>
						</tr>
						<tr>
							<td>品牌</td>
							<td>魅族</td>
						</tr>
						<tr>
							<td>型号</td>
							<td>魅族EP52 Lite蓝牙运动耳机</td>
						</tr>
						<tr>
							<td>耳机类别</td>
							<td>蓝牙耳机</td>
						</tr>
						<tr>
							<td>有／无 线</td>
							<td>无线</td>
						</tr>
						<tr>
							<td>充电时间</td>
							<td>1.5h</td>
						</tr>
						<tr>
							<td>是否支持蓝牙</td>
							<td>支持</td>
						</tr>
						<tr class="tbl-hd">
							<th colspan="2">音质参数</th>
						</tr>
						<tr>
							<td>频响范围</td>
							<td>20Hz - 20KHz</td>
						</tr>
						<tr class="tbl-hd">
							<th colspan="2">其他参数</th>
						</tr>
						<tr>
							<td>蓝牙版本</td>
							<td>4.2版本</td>
						</tr>
						<tr>
							<td>阻抗</td>
							<td>32Ω</td>
						</tr>
						<tr class="tbl-hd">
							<th colspan="2">包装清单</th>
						</tr>
						<tr>
							<td>包装清单</td>
							<td>充电线 x 1 <br>
							耳机 x 1<br>
							S、L硅胶耳套 x 1</td>
						</tr>
					</table>
				</div>
				
				<div class="more-recommend">
					<div class="recommend-hd">
						为您推荐
					</div>
					<div class="recommend-commodity">
						<a href="details.html">
							<img src="img/details/recommend.png" width="180px">
							<div class="recom-rext">
								<p style="font-size: 14px;">快充电源适配器（UP0830S）</p>
								<p style="font-size: 12px; color: #f14361; margin-top: 5px;">快速充电 安全无忧</p>
								<span style="font-size: 14px;margin-right: 5px;">限时特惠</span>
								<span style="font-size: 12px;">¥</span>
								<span style="font-size: 16px;">69</span>
							</div>
						</a>
					</div>
				</div>
				
			</div>
		</div>
		<div class="float-nav">
			<div class="container">
				<div class="price">
					<p>￥129.00</p>
					<span>月白</span>
				</div>
			</div>
		</div>
		<div class="footer-all"></div>
		<div id="scrolltop"></div>
		
	</body>
</html>
